<template>
  <div class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:text-white dark:bg-gray-800 dark:border-gray-700" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
    <div class="flex flex-col">
      <div class="flex justify-between mt-1">
        <span>实时天气</span>
        <span>当前所在地：{{ city }}</span>
      </div>
      <div v-if="nowWeather !== null " class="flex pb-3 mt-4">
        <span v-if="nowIconName"><svg-icon class="weather mt-1" :iconName="nowIconName"></svg-icon></span>
        <span class="ml-3">
          <div>{{ nowWeather.temp }}°</div>
          <div>{{ nowWeather.text }}</div>
        </span>
        <span class="ml-auto flex items-center">{{ nowWeather.windDir }}</span>
      </div>
      <div v-if="nowWeather !== null" class="border-b-2 pb-2 mb-4">
        <span class="mr-3">风力:{{ nowWeather.windScale }}级</span>
        <span>湿度:{{ nowWeather.humidity }}%</span>
      </div>
      <!-- 三天 -->
      <div class="flex justify-between">
        <span v-if="todayIconName" class="flex flex-col items-center">
          <div>今天</div>
          <div><svg-icon class="weather" :iconName="todayIconName"></svg-icon></div>
          <div>{{ weatherList.length > 0 ? weatherList[0].tempMin : '' }}°/{{ weatherList.length > 0 ? weatherList[0].tempMax : '' }}°</div>
          <div>{{ weatherList.length > 0 ? weatherList[0].textDay : '' }}</div>
        </span>
        <span v-if="tomorrowIconName" class="flex flex-col items-center">
          <div>明天</div>
          <div><svg-icon class="weather" :iconName="tomorrowIconName"></svg-icon></div>
          <div>{{ weatherList.length > 1 ? weatherList[1].tempMin : '' }}°/{{ weatherList.length > 1 ? weatherList[1].tempMax : '' }}°</div>
          <div>{{ weatherList.length > 1 ? weatherList[1].textDay : '' }}</div>
        </span>
        <span v-if="aftertTomorrowIconName" class="flex flex-col items-center">
          <div>后天</div>
          <div><svg-icon class="weather" :iconName="aftertTomorrowIconName"></svg-icon></div>
          <div>{{ weatherList.length > 2 ? weatherList[2].tempMin : '' }}°/{{ weatherList.length > 2 ? weatherList[2].tempMax : '' }}°</div>
          <div>{{ weatherList.length > 2 ? weatherList[2].textDay : '' }}</div>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getWeatherService, getNowWeatherService } from "@/api/common/hefeng";
import { getIpLocation } from '@/api/common/gaode'
import { ref, onMounted, watchEffect } from "vue";
import pinyin from 'js-pinyin'

// 一进页面就获取 IP定位
const initLocation = async () => {
  const res = await getIpLocation();
  console.log(res);
  if (res.data) {
    location.value = res.data.rectangle.split(';')[0]
    city.value = res.data.city
  }
  fetchWeatherData()
}

// 当前IP定位经纬度
const location = ref(null)

// 当前IP定位城市
const city = ref(null)

// 定义三日天气
const weatherList = ref([])
// 定义实时天气
const nowWeather = ref(null)

// 今天 明天 后天 icon图标名称
const todayIconName = ref(null)
const tomorrowIconName = ref(null)
const aftertTomorrowIconName = ref(null)
// 实时天气图标
const nowIconName = ref(null)


// 获取位置和更新天气信息
const fetchWeatherData = async () => {
  if (location.value) {
    const ResWeather = await getWeatherService(location.value);
    const ResNowWeather = await getNowWeatherService(location.value);

    if (ResWeather.code == 200) {
      weatherList.value = ResWeather.daily;
    }
    if (ResNowWeather.code == 200) {
      nowWeather.value = ResNowWeather.now;
    }
  }
}

onMounted(() => {
  initLocation()
})

// 根据三日天气名称和实时天气名称转换天气图标名称
const changeIcon = () => {
  if (weatherList.value.length > 0) {
    todayIconName.value = "icon-" + pinyin.getFullChars(weatherList.value[0].textDay)
  }
  if (weatherList.value.length > 1) {
    tomorrowIconName.value = "icon-" + pinyin.getFullChars(weatherList.value[1].textDay)
  }
  if (weatherList.value.length > 2) {
    aftertTomorrowIconName.value = "icon-" + pinyin.getFullChars(weatherList.value[2].textDay)
  }
  if (nowWeather.value) {
    nowIconName.value = "icon-" + pinyin.getFullChars(nowWeather.value.text)
  }
}

// 监听 weatherList 的变化，并在变化时更新图标名称
watchEffect(() => {
  changeIcon()
})


</script>
